var images = Array()

var id = 0;
var left = 1000;

function display_thumb(imageId, duration, next){
    var sliderValue = getSliderValue();
    if (duration == null) duration = 250;
    var img = images[imageId].img;
    $(img).show();
    $(img).height('100%');
    $(img).animate({marginLeft: '-='+(sliderValue/2)+'px',width:'100%'}, 250, null, next);
}

function hide_thumb(imageId, duration, next){
    var sliderValue = getSliderValue();
    if (duration == null) duration = 250;
    var img = images[imageId].img;
    $(img).height('100%');
    $(img).animate({marginLeft: '+='+(sliderValue/2)+'px',width:'0%'}, duration, null, next);
    $(img).hide();
}

function handle_image_click(){
    var picture = images[this.id];
    var position = $(this).css('position');
    if (position == 'absolute') {
        $(this).animate({opacity: '0'}, 500, null, function(){
            $(this).css('position', 'relative');
            $(this).css('top', '0px');
            $(this).css('left', '0px');
            $(this).css('z-index', '0');
            $(this).height('100%');
            $(this).width('100%');
            $(this).css('margin-left', '0px');
            $(this).attr('src',picture.thumbPath);
            $(this).animate({opacity:'1'}, 1000);
        });
    } else {
        hide_thumb(this.id, 150, function(){
            $(this).css('position', 'absolute');
            $(this).css('top', '20px');
            $(this).css('left', 200+'px');
            $(this).css('z-index', '1');
            $(this).height('');
            $(this).width('600px');
            $(this).attr('src',picture.path);
        });
    }
}

function find_img(pictures, id){
    for (i=0;i<pictures.length;i++){
        if (pictures[i].img.id == id)
            return pictures[i];
    }
}

/*
 * Images management 
 */

function display_images(json){
    var pictures = json.data;
    var sliderValue = getSliderValue();
    var left = pictures.length
    $('#pictures div.thumbsContainer').remove();
    $.each(pictures, function(i, picture){
        id = picture.id;
        var img = new Image();
        picture.img = img;
        img.id = id++;
        $(img).load(function(){
            $(this).hide();
            images[this.id] = find_img(pictures, this.id);
            left--;
            if (left == 0) {
                for(i=0;i<id;i++){
                    var img = images[i].img;
                    var div = $('<div class="thumbsContainer">').append(img).height(sliderValue*0.75).width(sliderValue);
                    $('#pictures').append(div);
                }
                var threads = 3;
                for(i=0;i<id;i++){
                    setTimeout('display_thumb('+i+')', 100*((i%(id/threads))*0.7));
                }
            }
            $(this).unbind('load');
        }).attr('src', picture.thumbPath).click(handle_image_click).css({cursor: 'pointer', marginLeft: sliderValue/2+'px'}).width(0);
    });
}

function getJSON(url, callback) {
	$('#spinner').css('visibility', 'visible');
	$('#status').text('');
	$('#duration').html('<em>in progress ..</em>');
	$.get(url, null, function(json){
		callback(json);
		$('#spinner').css('visibility', 'hidden');
		$('#duration').text('duration: ' + json.duration + ' ms');
		$('#status').text(json.status);
	}, 'json');
}

function do_search(){
    getJSON('/search?q='+document.getElementById('search_field').value, display_images);
} 

$(function(){
    $('#sidebar a').click(function(){
        getJSON(this.href, display_images);
        return false;
    }).mouseover(function(){
        $(this).animate({paddingLeft: '25px', color: '#989'}, 150);
    }).mouseout(function(){
        $(this).animate({paddingLeft: '20px', color: '#656'}, 250);
    });
    
    $('#spinner').spinner({
        height: 16,
        width: 16,
        speed: 100,
        image: '/css/images/spotlight_spinner_both.png' });
    
    $('#search_field').keypress(function(e){
        if (e.keyCode == 13){
            do_search();
        }
    });
    
    $('#reindex_field').click(function(e){
        getJSON('/reindex', function(data){
            
        });
    });
    
    $('.search').focus();
    
});


/*
 * Silder managment
 */

function getSliderValue(){
    var value = $("#slider").slider('value');
    return value;
}

$(function(){
    $("#slider").slider({
        min: 75, 
        max: 300,
        value: 100,
        start: function(e, ui){
            $('#slider_callout').fadeIn('fast');
        },
        stop: function(e, ui){
            $('#slider_callout').fadeOut('fast');
        },
        slide: function(e, ui){
        	var handle = $(".ui-slider-handle");
            $('#slider_callout').css('left', handle.css('left')).text(Math.round(ui.value));
            $('#pictures div.thumbsContainer').each(function(i, picture){
                var ratio = 1.3;
                var v = ui.value;
                $(picture).width(v);
                $(picture).height(v/ratio);
            });
        }
    });
});

// window management

function createWindowWithContent(title, content) {
	createWindow('/window', function(window) {
		window.find('.title').text(title);
		window.find('.content').text(content);
	});
}

function createWindow(url, callback) {
	var window = $('<div class="window">');
	$('#content').after(window);
	window.load(url, null, function(e) {
		var window = $(this).show();
		var submits = window.find('input[type=submit]');
		submits.click(function(e){
			e.preventDefault();
			var form = $(this).closest('form')[0];
			var action = form.action;
			$.post(form.action, $(form).serialize());
			closeWindow(this);
		});
		callback(window);
	});
}

$(function() {
	$('.windowOn').click(function(e) {
		e.preventDefault();
		createWindow(this.href, function(){});
	})
});

function closeWindow(button) {
	$(button).closest('.window').remove();
}